<template>
  <a-card class="notice-block">
    <header class="block-title">
      <div class="title-block">
        <div class="main-title"></div>
        <div class="sub-title"></div>
      </div>
      <a class="action-block" v-if="routePath == 'home'" @click="viewMoreProductList"
        >更多<arrow-right-outlined
      /></a>
    </header>

    <a-row :gutter="16">
      <a-col v-for="item in productList" :key="item.itemKey" class="gutter-row" :span="6">
        <a-card hoverable style="margin-top: 10px" @click="gotoDetail(item)">
          <template #cover>
            <img :src="getDemoImg(item.itemKey || '')" />
          </template>
          <a-card-meta>
            <template #description>
              <div style="height: 40px; line-height: 40px">{{ item.title }}</div>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script setup lang="ts">
  import { ArrowRightOutlined } from '@ant-design/icons-vue';
  import { ref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { getProductList1, getProductList12 } from './data';
  import { ProductCategory1Enum, ProductCategory3Type } from '/@/util/product-type';

  const productList = ref<ProductCategory3Type[]>([]);
  const router = useRouter();
  const props = defineProps({
    routePath: String,
  });

  const mergeTypeKey = ProductCategory1Enum.MERGE;

  function viewMoreProductList() {
    router.push({
      path: '/merge/detail',
      query: { category1: 'merge', category2: 'category2', itemKey: 'dbnd#PM25' },
    });
  }

  function gotoDetail(item: ProductCategory3Type) {
    const category1 = item.category1;
    const category2 = item.category2;
    const itemKey = item.itemKey;
    router.push({ path: '/merge/detail', query: { category1, category2, itemKey } });
  }

  function initProdcutList1(category1: string) {
    let size = 0;
    if (props.routePath === 'home') {
      size = 8;
    }
    productList.value = getProductList1(category1, size);
  }

  function initProductList12(category1: string, category2: string) {
    let size = 0;
    if (props.routePath === 'home') {
      size = 8;
    }
    if (!category2) {
      productList.value = getProductList1(category1, size);
    } else {
      productList.value = getProductList12(category1, category2, size);
    }
  }

  function init() {
    initProdcutList1(mergeTypeKey);
  }

  function getDemoImg(itemKey: string) {
    const newName = itemKey.replaceAll('#', '_');
    return new URL(`../../../assets/demo/merge/${newName}.png`, import.meta.url).href;
  }

  init();

  watch(
    () => router.currentRoute.value,
    (curRoute) => {
      const category1: string = curRoute.query.category1 as string;
      if (category1 === mergeTypeKey) {
        const category2: string = curRoute.query.category2 as string;
        initProductList12(category1, category2);
      }
    },
    { immediate: true },
  );
</script>

<style lang="less" scoped>
  .notice-block {
    width: 100%;
  }

  .news-image {
    margin: 20px 0;
    display: block;
    height: 630px;
    width: 100%;
    object-fit: cover;
  }

  .news-title {
    height: 25px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
    max-width: 100%;
    cursor: pointer;
    &:hover {
      color: #0188e8;
    }
  }

  .news-source {
    display: flex;
    gap: 36px;
  }

  .descirption-block {
    display: flex;
    align-items: center;
    gap: 2px;
    .icon {
      display: inline-block;
      width: 18px;
      height: 18px;
    }
    .text {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      line-height: 26px;
    }
  }
</style>
